// CSS files are now imported globally in index.js
import {
  Button,
  Card,
  Typography,
  Space,
  Divider
} from 'antd';
import {
  UserOutlined,
  SettingOutlined,
  LogoutOutlined,
  MenuOutlined,
  LoginOutlined
} from '@ant-design/icons';
import { Link } from 'react-router-dom';

const {
  Title,
  Paragraph
} = Typography;

function HealthCheck() {
  return (
    <div className="App">
      <Card
        title="Ant Design + React Demo"
        variant="outlined"
        style={{
          width: '100%',
          maxWidth: '800px',
          margin: '20px auto',
          boxShadow: '0 4px 12px rgba(0,0,0,0.15)',
          border: 'none'
        }}
      >
        <Title level={2}>Welcome to React + Ant Design</Title>
        <Paragraph>
          This is a simple demonstration of how to use Ant Design components in a React application.
        </Paragraph>
        <Divider />
        <Space direction="vertical" size="large">
          <Space>
            <Button type="primary" icon={<UserOutlined />}>User Profile</Button>
            <Button icon={<SettingOutlined />}>Settings</Button>
            <Button danger icon={<LogoutOutlined />}>Logout</Button>
            <Button type="link" icon={<LoginOutlined />} component={Link} to="/login">
              Login
            </Button>
          </Space>
          <Button type="dashed" icon={<MenuOutlined />} block>Open Menu</Button>
        </Space>
      </Card>
    </div>
  );
}

export default HealthCheck;